<template>
  <div class="info-wrap">
    <div class="info-name">
      <div>{{ info.sic }}</div>
    </div>
    <div class="info-center">
      <div class="info-line">
        <div>
          <svg-icon
            class="info-avatar"
            :icon-class="info.gender === genderEnum.男 ? 'man' : 'woman'"
            style="font-size: 40px; color: #646464"
          />
          <!-- <el-avatar
            class="info-avatar"
            :size="50"
            shape="square"
            cross-origin
            :src="info.gender === '男' ? man : woman"
          />-->
        </div>
        <div class="info-right">
          <div>
            <div class="info-item">
              <div class="info-title">年龄</div>
              <div class="info-cont">{{ info.age + info.ageUnit }}</div>
            </div>
            <div class="info-item">
              <div class="info-title">入组时间</div>
              <div class="info-cont">{{ info.inTime }}</div>
            </div>
          </div>
        </div>
      </div>

      <div class="info-line">
        <div class="info-item">
          <div class="info-title">研究中心</div>
          <div class="info-cont">{{ info.stationName }}</div>
        </div>
      </div>
    </div>
    <div class="progress-wrap">
      <el-progress :percentage="(info && info.visitEndCount / info.visitCount) || 0">
        <span>{{ info.visitEndCount }} / {{ info.visitCount }}</span>
      </el-progress>
    </div>
  </div>
</template>

<script lang="ts" setup>
import { defineEmits, defineProps } from 'vue'

import { genderEnum } from '@/configs/codeMaps'
// import { formatUrl } from '@/utils/common/formatUrl'
// import man from '@/assets/man.jpg'
// import woman from '@/assets/woman.jpg'

defineProps({
  info: {
    type: Object,
    default: () => {},
  },
})
defineEmits([])
</script>

<style lang="scss" scoped>
.progress-wrap {
  margin-top: 10px;

  :deep() {
    .el-progress {
      &-bar {
        &__outer {
          background: var(--background-color-base);
        }
      }

      &__text {
        margin-left: 20px;
      }
    }
  }
}

.info {
  &-wrap {
    display: flex;
    height: 100%;
    padding: 0 15px;
    cursor: pointer;
    background: var(--background-color-1);
    border-radius: 6px;
    flex-direction: column;
    justify-content: center;

    &:hover {
      background: var(--card-hover-background);
    }

    &.is-active {
      background: var(--card-active-background);
    }
  }

  &-name {
    margin-bottom: 10px;
    font-size: 22px;
    font-weight: 600;
    line-height: 40px;
  }

  &-center {
    align-items: center;

    & > div {
      margin-right: 10px;
    }
  }

  &-title {
    font-size: 14px;
  }

  &-cont {
    font-size: 16px;
    font-weight: 600;
  }

  &-right {
    margin-left: 20px;

    & > div {
      display: flex;
    }
  }

  &-line {
    display: flex;
    margin-top: 10px;

    &:first-child {
      margin-top: 0;
    }
  }

  &-item {
    & + & {
      margin-left: 20px;
    }
  }
}
</style>
